<template>
  <div>
    <el-drawer @close="changeStatus" size="calc(100vw - 900px);min-width: 75%;" :modelValue="true" :show-close="false" direction="rtl">
      <template #header="{ close }">
        <div class="drawer-header">
          {{title}}
          <span class="right-absulute" finger @click="close">
            <el-icon size="16" color="#999">
              <CircleCloseFilled />
            </el-icon>
            <span>关闭</span>
          </span>
        </div>
      </template>
      <!-- 插槽内容 -->
      <slot></slot>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup name="drawerHeader">
import { ref, reactive } from 'vue';
const props = defineProps({
  title: {
    type: String,
    default: '详情',
  },
});

const emit = defineEmits(['closeBf']);
// 关闭事件
const changeStatus = () => {
  // 所有的父组件事件都统一叫'closeBf'
  emit('closeBf');
};
</script>

<style lang="less" scoped>
.drawer-header {
  padding: 0 20px;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  background: #f7f7f7ff;
  border-bottom: 1px solid #eee;
  height: 40px;
  position: relative;
  .iconfont {
    position: absolute;
    left: 6%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 35px;
    margin-left: 20px;
  }
  .right-absulute {
    i {
      vertical-align: middle;
      margin-right: 6px;
    }
    &:hover {
      i {
        color: #333;
      }
    }
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
  &::after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}
</style>

<style lang="less">
.el-drawer__header {
  margin-bottom: 0 !important;
  padding: 0 !important;
}
</style>